<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //同步和异步
      //js 里的任务 同步 异步(定时器,资源的加载  ajax  各种需要触发的事件)
      //让同步任务 排队 异步任务 在同步之后排队
      //js的事件循环  event loop
      // console.log(111);
      // console.log(222);
      // console.log("这个任务需要5s");
      // console.log(333);

      //js里的异步  js设计之初 是单线程执行任务
      //单线程: 同一时刻 只能执行一件事
      //dom操作  同一时刻 既添加节点 又删除节点
      //多线程 同一时刻 可以做多件事

      // console.log(111);
      // console.log(222);
      // setTimeout(function () {
      //   console.log(444);
      // }); //出生就注定需要等待 系统会把他放在最后
      // console.log(333);

      //编程的时候 需要异步之后执行一些代码
      function fn1(cb) {
        setTimeout(function () {
          console.log(111);
          cb();
        }, 2000);
      }
      function fn2(cb) {
        setTimeout(function () {
          console.log(222);
          cb();
        }, 2000);
      }
      function fn3(cb) {
        setTimeout(function () {
          console.log(333);
          cb();
        }, 2000);
      }

      // fn1();
      // fn2();
      // fn3();
      //回调地狱  回调函数出现层层嵌套 不够优雅 可维护性差
      //ES6出现  promise 解决回调地狱问题
      fn1(function () {
        console.log("fn1执行完了");
        fn2(function () {
          console.log("fn2执行完了");
          fn3(function () {
            console.log("fn3执行完了");
          });
        });
      });
    </script>
  </body>
</html>
